<!DOCTYPE html>
<html>

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>单词存储</title>
  <link rel="stylesheet" href="./libs/bootstrap/css/bootstrap.min.css">
  <style>
    .panel {
      /* width: 1200px; */
      margin: 10px auto;
    }

    .table img {
      width: 40px;
      height: 40px;
    }

    td,
    th {
      text-align: center;
    }
  </style>
</head>

<body>
  <!-- 添加模态框 -->
  <div class="modal fade" id="modal-id">
    <div class="modal-dialog">
      <div class="modal-content">
        <div class="modal-header">
          <button type="button" class="close" data-dismiss="modal" aria-hidden="true">&times;</button>
          <h4 class="modal-title">添加单词</h4>
        </div>
        <div class="modal-body">
          <form class="form-horizontal" id="addGoodsForm">
            <div class="form-group">
              <label for="inputEmail3" class="col-sm-2 control-label">单词名称</label>
              <div class="col-sm-10">
                <input type="text" name="name" class="form-control" id="name" placeholder="请输入单词名称">
              </div>
            </div>
            <div class="form-group">
              <label for="inputEmail3" class="col-sm-2 control-label">单词解释</label>
              <div class="col-sm-10">
                <input type="text" name="subName" class="form-control" id="subName" placeholder="请输入单词解释">
              </div>
            </div>



          </form>
        </div>
        <div class="modal-footer">
          <button type="button" class="btn btn-default" data-dismiss="modal" id="addword2">新增单词</button>
          <button type="button" class="btn btn-primary" data-dismiss="modal">关闭</button>
        </div>
      </div>
    </div>
  </div>

  <!-- 修改模态框 -->
  <div class="modal fade" id="modal-rec">
    <div class="modal-dialog">
      <div class="modal-content">
        <div class="modal-header">
          <button type="button" class="close" data-dismiss="modal" aria-hidden="true">&times;</button>
          <h4 class="modal-title">修改单词</h4>
        </div>
        <div class="modal-body">
          <form class="form-horizontal" id="addGoodsForm">
            <div class="form-group">
              <label for="inputEmail3" class="col-sm-2 control-label">单词名称</label>
              <div class="col-sm-10">
                <input type="text" name="name" class="form-control" id="rev_name" placeholder="请输入单词名称" disabled>
              </div>
            </div>
            <div class="form-group">
              <label for="inputEmail3" class="col-sm-2 control-label">单词解释</label>
              <div class="col-sm-10">
                <input type="text" name="revName" class="form-control" id="revName" placeholder="请输入单词解释">
              </div>
            </div>



          </form>
        </div>
        <div class="modal-footer">
          <button type="button" class="btn btn-default" data-dismiss="modal" id="revword2">修改单词</button>
          <button type="button" class="btn btn-primary" data-dismiss="modal">关闭</button>
        </div>
      </div>
    </div>
  </div>

  <!-- 3、上传头像静态布局-结束 -->
  <div class="container">
    <div class="panel panel-primary">
      <!-- Default panel contents -->
      <div class="panel-heading">单词列表管理</div>
      <div class="panel-body">
        <!-- 存放的搜索区域 -->
        <div class="row">
          <div class="col-lg-6">
            <div class="input-group">
              <input type="text" id="word2Name" class="form-control" placeholder="输入单词信息...">
              <span class="input-group-btn">
                <button class="btn btn-default" id="btn_search" type="button">搜索</button>
              </span>
            </div><!-- /input-group -->
          </div><!-- /.col-lg-6 -->

          <div class="col-lg-3 col-lg-offset-3">
            <!-- 添加单词的按钮 -->

            <button type="button" class="btn btn-success" id="addHero" data-toggle="modal"
              data-target="#modal-id">添加单词</button>

          </div>
        </div>

      </div>

      <!-- Table -->
      <table class="table">
        <thead>
          <tr>
            <th>单词</th>
            <th>解释</th>
            <th>操作区</th>
          </tr>

        </thead>
        <!-- 表格主体 -->
        <tbody id="tbody">
          <!-- tr 是一行内容 -->
          <!-- <tr>
            <td>let</td>
            <td>声明变量关键字</td>

            <td>
              <button type="button" class="btn btn-warning">修改</button>
              <button type="button" class="btn btn-danger">删除</button>
            </td>
          </tr> -->
        </tbody>
      </table>
    </div>

  </div>

  <script src="./libs/jquery/jquery.min.js"></script>
  <script src="./libs/bootstrap/js/bootstrap.min.js"></script>
  <script src="./libs/template-web.js"></script>
  <script type="text/html" id="word2">
    {{if list }}
    {{each list item index}}

    <tr>
      <td>{{item.key}}</td>
      <td>{{item.value}}</td>

      <td>
        <button type="button" class="btn btn-warning" data-id="{{item.id}}">修改</button>
        <button type="button" class="btn btn-danger" data-id="{{item.id}}">删除</button>
      </td>
    </tr>
    {{/each}}

    {{else}}

    <tr>
      <td colspan="3">没有该数据</td>
    </tr>
    {{/if}}
  </script>
  <script>
    let word2 = localStorage.getItem('word2');

    // 判定数据是否为空
    if (word2 == null) {
      word2 = {};
    } else {
      word2 = JSON.parse(word2);
    }


    getword2(word2)

    function getword2(word2) {
      // 获取本地数据

      // console.log(word2);
      let word2Html = template("word2", { list: word2 })
      $("#tbody").html(word2Html)
    }

    // 搜索
    $("#btn_search").on("click", function () {
      let value = $("#word2Name").val().trim();
      // console.log(value);
      let arr = [];
      $.each(word2, function (index, item) {
        if (item.key.indexOf(value) != -1 || item.value.indexOf(value) != -1) {
          console.log(value);

          arr.push({ key: item.key, value: item.value })
        }
      })
      console.log(arr);

      getword2(arr)
    })


    // 添加单词
    $("#addword2").on("click", function () {
      let word2Value = $("#name").val().trim();
      let desValue = $("#subName").val().trim();
      // console.log(word2Value, desValue);

      // 安全判定，单词和解释为空时，结束操作
      if (word2Value == '' && desValue == '') {
        alert('请输入内容');
        return;
      } else if (word2Value == '') {
        alert('输入的单词不能为空');
        return;
      } else if (desValue == '') {
        alert('输入的解释不能为空');
        return;
      };

      // 获取本地存储数据 有就是字符串，没有就是null
      let word2 = localStorage.getItem('word2');
      // 判定是否第一次存储数据
      if (word2 === null) {

        word2 = []; //空数组
        // console.log(word2s);

      } else {
        //将取出来的word2s转成对象    
        word2 = JSON.parse(word2);

      }
      let arr = []
      let id = 0;
      $.each(word2, function (i, n) {
        arr.push(n.id)
      })
      // console.log(arr);
      // console.log(Math.max(...arr));
      if (arr.length) {
        id = Math.max(...arr) + 1;
      } else {
        id = 0;
      }

      // console.log(word2);
      let str = { id: id, key: word2Value, value: desValue };
      word2.push(str)
      localStorage.setItem('word2', JSON.stringify(word2));

      getword2(word2)
      $("#name").val('')
      $("#subName").val('')
    })

    //  删除
    $("#tbody").on("click", ".btn-danger", function () {
      let id = $(this).attr("data-id");
      // console.log(id);
      let index = 0;
      $.each(word2, function (i, n) {
        // console.log(i, n);
        // console.log(n.id);
        if (id == n.id) {
          // console.log(i);
          index = i;
        }

      })
      console.log(index);

      word2.splice(index, 1)
      // console.log(word2);

      localStorage.setItem('word2', JSON.stringify(word2));
      getword2(word2)
    })
    let id2 = 0;
    let key;
    let value;
    // 修改
    $("#tbody").on("click", ".btn-warning", function () {
      $('#modal-rec').modal('show');
      id2 = $(this).attr("data-id");
      console.log(id2);

      $.each(word2, function (i, n) {
        // console.log(i, n.id);
        if (n.id == id2) {
          key = n.key;
          console.log(key);

          $("#rev_name").val(n.key);
        }
      })
    })
    let arr = [];
    // 修改2
    $("#revword2").on("click", function () {
      let value = $("#revName").val().trim();
      // console.log(id2);

      $.each(word2, function (i, n) {

        if (n.key == key) {
          n.value = value
          // console.log(n.value);
        }

        // console.log(n);

        arr.push(n)
      })
      localStorage.setItem('word2', JSON.stringify(arr));
      $("#revName").val('')
      getword2(arr)
    })

  </script>
</body>

</html>